<template>
    <div class="toView">
      <div class="toView-wrap">
        <div class="toView-header">
          <div class="toView-tit">
            <div class="toView-div">denom名称:{{ denomName }}</div>
            <div class="toView-div">DAW名称:{{ dawName }}</div>
            <div class="toView-div">DAW数量:{{ count }}</div>
          </div>
          <!-- <img src="@/assets/img/close.png" @click="hidden()"> -->
        </div>
        <div class="toViewInfo">
          <el-select v-model="castingSelect" @change="castingChange(castingSelect)" placeholder="选择状态">
            <el-option
              v-for="item in castingStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-table :data="dataList" border style="width: 100%">
            <el-table-column prop="dawId" label="tokenID" width="550" />
            <el-table-column prop="dawStatus" label="状态" width="200" >
              <template scope="scope">
                <p v-if="scope.row.dawStatus=='0'">未售</p>
                <p v-if="scope.row.dawStatus=='1'">已售</p>
                <p v-if="scope.row.dawStatus=='2'">已销毁</p>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <el-button slot-scope="scope" type="text" size="small" @click="toViewhidden(dataList[scope.$index])">查看</el-button>
            </el-table-column>
          </el-table>
        </div>
  
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      </div>
      <Detail v-if="detailShow" :id="id" :dawStatus="dataList.dawStatus" @hidden="detailhidden" />
    </div>
  </template>
  
  <script>
  import Detail from './detail'
  export default {
    name: 'Toview',
    components: { Detail },
    props: ['dawInfo'],
    data() {
      return {
        dataList:[],
        tableData: [],
        currentPage: 5,
        detailShow: false,
        castingStatus: [
          { value: '0', label: '已售' }, 
          { value: '1', label: '未售' }, 
          { value: '2', label: '已销毁' }
        ],
        castingSelect: '',
  
        // 返回参数
        page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页显示多少条,
            dawNameId: '',
            dawStatus:'',
        },
  
        denomName: '',
        dawName: '',
        count: '',
        id: '', // 查看详情id
        pageLoading: true
      }
    },
    mounted() {
      this.getPage()
    },
    methods: {
      hidden() {
        // 通过$emit引用组件传过来的hidden()事件
        this.$emit('hidden')
      },
  
      // 点击查看
      toViewhidden(info) {
        console.log(9999,info,info.dawStatus)
        this.id = info.id
        this.dataList.dawStatus = info.dawStatus
        this.detailShow = true
      },
      // 点击隐藏查看弹窗
      detailhidden() {
        this.detailShow = false
      },
      getPage() {
        this.page.dawNameId = this.dawInfo.dawNameId
        this.denomName = this.dawInfo.denomName
        this.dawName = this.dawInfo.dawName
        this.count = this.dawInfo.count
        this.$http({
            url: this.$http.adornUrl(`/admin/nftdaw/getpageDawInfo?pageSize=${this.page.pageSize}&pageNum=${this.page.currentPage}&dawNameId=${this.page.dawNameId}&dawStatus=${this.page.dawStatus}`),
            method: 'get',
        }).then(({ data }) => {
            this.dataList = data.data.list
            this.page.total = data.data.total
            this.dataListLoading = false
        })
      },
  
      //状态选择
      castingChange(value){
        this.page.dawStatus = value;
        this.page.dawNameId = this.dawInfo.dawNameId
        this.denomName = this.dawInfo.denomName
        this.dawName = this.dawInfo.dawName
        this.count = this.dawInfo.count
        this.$http({
            url: this.$http.adornUrl(`/admin/nftdaw/getpageDawInfo?pageSize=${this.page.pageSize}&pageNum=${this.page.currentPage}&dawNameId=${this.page.dawNameId}&dawStatus=${this.page.dawStatus}`),
            method: 'get',
        }).then(({ data }) => {
            this.dataList = data.data.list
            this.page.total = data.data.total
            this.dataListLoading = false
        })
  
      },
  
      //分页按钮
      handleSizeChange (val) {
          this.page.pageSize = val
          this.getDataList(this.page)
      },
      handleCurrentChange (val) {
          this.page.currentPage = val
          this.getDataList(this.page)
      },
    }
  }
  </script>
  
  <style scoped>
      li{ list-style: none; }
      .toView{
          position: fixed;
          top: 0; left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,.5);
          z-index: 2002;
      }
      .toView-wrap{
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%,-50%);
          width: 1000px;
          max-height: 600px;
          overflow: auto;
          background: #fff;
      }
      .toView-header{
          position: relative;
          background: rgb(243,243,243);
          border-bottom: 1px solid #ccc;
          padding: 0px 30px;
      }
      .toView-tit{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
      }
      .toView-div{
          display: flex;
          flex-direction: row;
          font-size: 18px;
          font-weight: 600;
          margin: 10px 40px 10px 0;
      }
      .toView-div>div{
          margin-right: 30px;
      }
      .toView-header img{
          position: absolute;
          top: 0;
          right: 0;
          width: 50px;
          padding: 15px;
          cursor: pointer;
      }
      .toViewInfo{
          padding: 0px 30px;
      }
      .toViewInfo >>> .el-select{
        margin: 10px 0;
      }
      .pagination{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          margin-top: 30px;
      }
  
  </style>
  